<template>
  <div class="mine-page">
    <div class="pagination-bar">
      <button @click="before">上一位选手</button>
      <button @click="after">下一位选手</button>
    </div>
    <div class="preview">
      <mt-swipe :auto="0" @change="handleChange" ref="swipeWrapper">
        <mt-swipe-item v-if="hasVideo">
          <video style="display:none"
                preload="meta"
                ref="video"
                :poster="video.thumbUrl"
                :src="video.url"
                @play="videoPlay"
                @pause="videoPause"
                @ended="videoEnded"
                width="100%"
                height="100%"></video>
          <img v-show="!isPlaying" :src="video.thumbUrl" @click="openVideo" >
        </mt-swipe-item>
        <mt-swipe-item v-for="(url,index) in photos" :key="index">
          <img class="wc-preview-img" :src="url" @click="$preview($event,photos,index)">
        </mt-swipe-item>
      </mt-swipe>
      <div class="nav" v-show="!isPlaying">
        <div class="tag">
          <button class="videos" v-show="hasVideo" :class="{active: isVideo}" @click.stop="setVideo">视频</button>
          <button class="images" v-show="hasPic" :class="{active: !isVideo}" @click.stop="setPicture">图片</button>
        </div>
        <span class="video-btn" v-show="isVideo && hasVideo" @click.stop="openVideo"></span>
        <div class="good" @click.stop="toVote(girl.id)">
          <div class="heart" :class="{active: isVoted}"></div>          
          <span>{{girl.vote}}</span>
          <button :disabled="isVoted" :class="{isVoted: 'disabled'}">{{isVoted?'已投票':'投票'}}</button>
        </div>
      </div>
    </div>
    <div class="girl-info">
      <p>
        <span>{{girl.number}}号</span>
        <span>{{girl.nickName}}</span>
        <span class="xiang-message" @click="goMessage"></span>
        <!-- <img class="icon-xiang" src="../../static/img/xiang3.png?2" @click="goMessage"> -->
      </p>
      <div class="box">
        <p><span class="large">{{girl.vote}}</span>&nbsp;票</p>
        <p>当前排名：<span>{{girl.sort}}</span></p>
      </div>      
    </div>
    <div class="btn-group" style="padding-bottom: 0;">
      <button class="btn btn-light" @click="toShare">拉票</button>
      <button class="btn btn-primary" @click.stop="toVote(girl.id)">投票</button>
    </div>
    <div class="btn-group">
      <button class="btn btn-primary btn-block" @click="toJoin">我要参加</button>
    </div>
    <div class="content">
      <div class="header">参赛宣言</div>
      <div class="body">
        <p>{{girl.declaration}}</p>
      </div>
    </div>
    <!-- 投票详情 -->
    <div class="vote-detail">
      <div class="title">她的后援团</div>
      <ul>
        <li v-for="backer in backers" :key="backer.id">
          <p><span class="name">{{backer.name}}</span><span>为她投{{backer.voteNum}}票</span></p>
        </li>
      </ul>
      <a v-show="!isComplete" class="more" @click="loadMore">查看更多</a>
      <p v-show="isComplete" class="list-info">已经到底啦</p>
    </div>
    

    <div id="cover" class="cover" v-show="isShare" @click="hideShare">
      <div class="info">
        <p>点击右上角按钮</p>
        <p>选择发送给朋友</p>
      </div>
    </div>
    <button ref="shareText" id="shareText" style="display: none">{{shareText}}</button>
  </div>  
</template>

<script>
import { callOcFun, decodeUnicode, getClientType } from '../libs/app'
import Clipboard from 'clipboard'

export default {
  name: 'Mine',
  data () {
    return {
      id: 0,
      photos: [],
      isVoted: false,
      isVideo: false,
      hasVideo: false,
      hasPic: false,
      isPlay: false,
      video: {
        thumbUrl: '',
        url: ''
      },
      girl: {
        id: 0,
        sort: 0,
        number: 0,
        nickName: '',
        vote: 0,
        userId: 0,
        userName: ''
      },
      isShare: false,
      isPlaying: false,
      shareText: '',
      beforeGirlId: 0,
      afterGirlId: 0,
      backers: [],
      backerCondition: {
        page: 1
      },
      isComplete: false
    }
  },
  methods: {
    queryDetail () {
      let self = this

      // 刷新拉票
      self.backerCondition.beautyId = self.id
      self.queryBacker()

      let params = {'beautyId': this.id}
      this.$indicator.open()
      this.$http.simplePost('/beautyPageantController/getPlayerDetail', params).then( function (data) {

        
        
        
        

        self.$indicator.close()
        self.id = data.id
        self.girl.id = data.id
        self.girl.sort = data.sort
        self.girl.number = data.id
        self.girl.nickName = decodeUnicode(data.signName)
        self.girl.vote = data.voteNum
        self.girl.declaration = decodeUnicode(data.declaration)
        if(data.userId) {
          self.girl.userId = data.userId
        }
        if(data.userName) {
          self.girl.userName = decodeUnicode(data.userName)
        }

        let medias = data.beautyPictures
        for(let i=0,len=medias.length; i<len; i++) {
          if(medias[i].type === 'VIDEO') {

            self.hasVideo = true
            self.isVideo = true

            // 赋值视频
            self.video.thumbUrl = medias[i].url
            self.video.url = medias[i].videoUrl

          } else if(medias[i].type === 'PICTURE') {

            self.hasPic = true

            //赋值图片
            self.photos.push(medias[i].url)

          }
        }

        //记录上一页、下一页
        self.beforeGirlId = data.preId || 0
        self.afterGirlId = data.nextId || 0
        
      }).catch(() => {
        self.$indicator.close()
      })
    },
    clearGirl () {
      this.photos = []
      this.backers = []
      this.isVoted = false
      this.isVideo = false
      this.hasVideo = false
      this.hasPic = false
      this.isPlay = false
      this.isPlaying = false
      if (getClientType() == 'android') {
        if(this.$refs.video) {
          this.$refs.video.style.display = 'none'
        }        
      }
      this.video = {
        thumbUrl: '',
        url: ''
      }
      this.girl = {
        id: 0,
        sort: 0,
        number: 0,
        nickName: '',
        vote: 0,
        userId: 0,
        userName: ''
      }
      this.isShare = false
    },
    toVote () {
      let self = this
      if(this.$inApp) {
        this.$messagebox.confirm(`确认要给她投一票？`).then(action => {
          this.$http.complexPost('/beautyPageantController/vote', {beautyId: this.girl.id, serverToken: this.$token}).then((data) => {
            // this.girl.vote++
            this.isVoted = true
          })
        })
      } else {
        this.$messagebox.confirm('下载香肠树App,为你心爱的小姐姐投一票吧').then(action => {        
          // 不在本地应用内，跳转下载应用链接
          window.open(self.$url, '_self')
        })
      }
            
    },
    goMessage () {
      if(this.$inApp && this.girl.userId) {
        callOcFun('goMessage', {userId: this.girl.userId, userName: this.girl.userName})
      } else if(this.$inApp) {
        this.$messagebox.alert('当前小姐姐还未注册App,通知她下载香肠树App吧！')
      } else {
        this.$messagebox.confirm('下载香肠树App,为你心爱的小姐姐投一票吧').then(action => {        
          // 不在本地应用内，跳转下载应用链接
          window.open(self.$url, '_self')
        })
      }
    },
    toShare () {
      if(this.girl.id) {
        this.$router.push({name: 'Share', params:{girl: this.girl}})
      }     
      // let self = this
      // if(this.$inApp) {        
      //   this.$messagebox({
      //     title: '复制链接地址，分享好友',
      //     message: `http://www.xiangchangshu.com/beauty/index.html#/detail/${this.girl.id}`,
      //     confirmButtonText: '复制'
      //   }).then(action => {
      //     self.$copyText(`http://www.xiangchangshu.com/beauty/index.html#/detail/${this.girl.id}`).then(action => {
      //       self.$toast('复制成功')
      //     }, err =>{
      //       self.$toast('该浏览器不支持自动复制')
      //     })
      //   })
      // } else {
      //   this.isShare = true
      // }
    },
    hideShare () {
      this.isShare = false
    },
    toJoin () {
      if(this.$inApp) {
        callOcFun('toJoin', {url: `${process.env.API_HOST}/beauty/index.html#/join`})
        return
      }
      this.$router.push('/join')
    },
    toggleVideo () {

    },
    setPicture () {
      // this.isVideo = false;
      // TODO：暂时无法更新 swipe index
    },
    setVideo () {
      // this.isVideo = true;      
      // TODO：暂时无法更新 swipe index
    },
    handleChange (index) {
      if(index === 0) {
        this.isVideo = true;
      } else {
        this.isVideo = false;
      }
    },
    openVideo () {
      this.isPlay = true
      // this.$refs.video.style.display = 'block'
      if (getClientType() == 'android') {
        this.$refs.video.style.display = 'block'
      }
      this.$refs.video.play()
    },
    closeVideo () {
      this.isPlay = false
      this.$refs.video.pause()
    },
    videoPlay () {
      this.isPlaying = true
      this.$refs.video.controls = true
    },
    videoPause () {
      this.isPlaying = false
      if (getClientType() == 'android') {
        this.$refs.video.style.display = 'none'
      }
      // this.$refs.video.style.display = 'none'
      this.$refs.video.controls = false
    },
    videoEnded () {
      this.isPlaying = false
      if (getClientType() == 'android') {
        this.$refs.video.style.display = 'none'
      }
      // this.$refs.video.style.display = 'none'
      this.$refs.video.controls = false
    },
    before () {
      if(!this.beforeGirlId) {
        this.$messagebox.alert('当前已经是第一位小姐姐了')
        return
      }
      // this.$router.push({name: 'Detail', params:{id: this.beforeGirlId}})
      this.clearGirl()
      this.id = this.beforeGirlId
      this.$router.push({name: 'Detail', params:{id: this.beforeGirlId}})
      this.queryDetail()
    },
    after () {
      debugger
      if(!this.afterGirlId) {
        this.$messagebox.alert('当前已经是最后一位小姐姐了')
        return
      }
      // this.$router.push({name: 'Detail', params:{id: this.afterGirlId}})
      this.clearGirl()
      this.id = this.afterGirlId
      this.$router.push({name: 'Detail', params:{id: this.afterGirlId}})
      this.queryDetail()
    },
    queryBacker () {      
      this.$http.simplePost('/beautyPageantController/getBeautyVote', this.backerCondition).then((data) => {

        if(data.lastPageNumber) {
          this.isComplete = true
        }

        data = data.content
        for(let i=0,len=data.length; i<len; i++) {
          this.backers.push({
            id: data[i].userId,
            name: data[i].nickName,
            voteNum: data[i].voteNum
          })
        }
      })
    },
    loadMore () {
      this.backerCondition.page++
      this.queryBacker()
    }
  },
  created: function () {
    this.shareText = `http://www.xiangchangshu.com/beauty/index.html#/detail/${this.girl.id}`
    this.id = this.$route.params.id || this.id
    //解决刷新获取不到 id 问题
    if(this.id) {
      this.queryDetail()
    } else {
        //返回上一页
      this.$router.back(-1);
    }
  },
  beforeRouterUpdate () {
    debugger
  }
}
</script>

<style scoped>
video {
  object-fit: fill;
}
.mine-page {
  padding-bottom: 100px;
}
.preview {
  position: relative;
  height: 880px;
  overflow: hidden;
  background-color: #000;
}
.preview img {
  max-width: 100%;
  max-height: 100%;
}
.preview .tag {
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
  z-index: 2999;
}
.preview .tag button {
  border: none;
  background-color: rgba(255,255,255,0.5);
  padding: 8px 26px;
  font-size: 24px;
  color: #333;
  border-radius: 50px;
  margin: 0 30px;
}
.preview .tag button.active {
  background-color: #502f76;
  color: #fff;
}
.preview .good {
  position: absolute;
  bottom: 40px;
  right: 50px;
  width: 145px;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.preview .good button {
  border: none;
  background-color: #f36980;
  font-size: 24px;
  line-height: 24px;
  color: #fff;
  padding: 10px 25px;
  border-radius: 30px;
  margin-top: 20px;
}
.preview .good button.disabled {
  color: rgba(243, 105, 128, .62)
}
.preview .video-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  width: 150px;
  height: 150px;
  margin-top: -75px;
  margin-left: -75px;
  background-image: url('../../static/img/video-btn.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
}
.heart {
    position: relative;
    width: 80px;
    height: 80px;
}
.heart.active::before,
.heart.active::after {
  background-color: red;
}  
.heart:before,.heart:after {
    content: "";
    width: 40px;
    height: 60px;
    position: absolute;
    background: #fff;
    left: 40px;
    top: 0;
    -webkit-border-radius: 50px 50px 0 0;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transition: background .5s;
    transition: background .5s;
}  
.heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}
.mine-page .girl-info {
  padding: 30px 50px 30px 30px;
  background: #462e5f;
}
.mine-page .girl-info>p {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 30px;
}
.mine-page .girl-info .box p:last-child {
  font-size: 24px
}
.mine-page .icon-xiang {
  display: inline-block;
  width: 75px;
}
.mine-page .girl-info .box {
  width: 500px;
  box-sizing: border-box;
  border: 1px solid #fff;
  margin: 20px auto;
  padding: 20px;
}
.mine-page .girl-info .box p {
  font-size: 28px;
}
.mine-page .girl-info .box p:first-child {
  margin-bottom: 15px;
}
.mine-page .girl-info .box p span {
  color: #f6b900;
  font-weight: bold;
}
.mine-page .girl-info .box .large {
  font-size: 40px;
}
.mine-page .btn-group {  
  background-color: #5b03d3;
  padding-top: 50px;
  padding-bottom: 100px;
  display: flex;
  justify-content: space-around;
}
.mine-page .btn-group button,
.mine-page .btn-block {
  height: 80px;
  line-height: 70px;
  font-size: 34px;
  border: none;
  border-radius: 50px;
}
.mine-page .btn-group button {
  width: 320px;
}
.mine-page .btn-primary {
  color: #fff;
  background-color: #b15bee;
}
.mine-page .btn-light {
  color: #422e5c;
  background-color: #d9c5f5;
}
.mine-page .content {
  position: relative;
  top: -93px;
}
.mine-page .content .header {
  position: relative;
  top: 20px;
  height: 161px;
  line-height: 200px;
  align-items: center;
  background-image: url(../../static/img/subtitle-bg.png);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
}
.mine-page .content .body {
  box-sizing: border-box;
  background-color: #f1e1ff;
  width: 92%;
  margin: 0 auto;
  padding: 50px 45px 200px;
  color: #333;
  font-size: 26px;
  text-align: left;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.mine-page .content .body h6 {
  font-weight: bold;
  margin-top: 50px;
  margin-bottom: 20px;
}
.mine-page .content .body p {
  line-height: 60px;
}
.mine-page .btn-block {
  width: 93% !important;
}
.mine-page .xiang-message {
  display: block; 
  background-image: url('../../static/img/xiang3.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
  width: 80px;
  height: 80px;
}
.mine-page .pagination-bar {
  background-color: #502f76;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 28px;  
}
.mine-page .pagination-bar button {
  background-color: transparent;
  height: 70px;
  line-height: 70px;
  font-size: 28px;
  border: none;
  color: #fff;
  padding-left: 35px;
  padding-right: 35px;
}
.cover {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.8);
}
.cover .info {
  background-color: #fff;
  width: 40%;
  position: absolute;
  top: 50px;
  right: 20px;
  padding: 1rem;
}
.cover .info p {
  margin: 0;
  height: 1.5rem;
  line-height: 1.5rem;
  color: #333;
}
.cover .info::after {
  content: '';
  display: block;
  position: absolute;
  top: -15px;
  right: 10px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid #fff;
}
.vote-detail {
  position: relative;
  width: 92%;
  box-sizing: border-box;
  margin: 0 auto;
  min-height: 180px;
  padding: 80px 30px;
  background-color: #f1e1ff;
  border-radius: 15px;
  margin-top: -70px;
  text-align: center;
}
.vote-detail::before {
  position: absolute;
  top: -70px;
  left: 130px;
  content: '';
  display: inline-block;
  width: 29px;
  height: 106px;
  background-image: url(../../static/img/niu.png);
  background-size: contain;
  background-position: center center;
}
.vote-detail::after {
  position: absolute;
  top: -70px;
  right: 130px;
  content: '';
  display: inline-block;
  width: 29px;
  height: 106px;
  background-image: url(../../static/img/niu.png);
  background-size: contain;
  background-position: center center;
}
.vote-detail .title {
  width: 300px;
  height: 80px;
  line-height: 80px;
  color: #462e5f;
  font-size: 28px;
  background-image: url(../../static/img/title.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  margin: 0 auto;
}
.vote-detail ul {
  margin: 50px auto;
}
.vote-detail ul li {
  height: 100px;
  border-bottom: 1px solid #c7b1da;
  padding: 0 10px;
}
.vote-detail ul li p {
  height: 100px;
  line-height: 100px;
  font-size: 28px;
  color: #666;
  text-align: left;
}
.vote-detail ul li p .name {
  color: #462e5f;
  display: inline-block;
  margin-right: 20px;
  /* max-width: 250px; */
  /* overflow: hidden; */
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vote-detail ul li p span {
  clear: both;
  display: inline-block;
  height: 100px;
  line-height: 100px;
}
.more, .list-info {
  font-size: 24px;
  color: #815ba2;
}
</style>